<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>数据库表管理</title>
	<SCRIPT type="text/javascript" src="../biz/zheng/import.js"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="../biz/ext3/examples/ux/gridfilters/css/GridFilters.css" />
    <link rel="stylesheet" type="text/css" href="../biz/ext3/examples/ux/gridfilters/css/RangeMenu.css" />
    <link rel="stylesheet" type="text/css" href="../biz/ext3/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../biz/ext3/examples/ux/css/MultiSelect.css" />
     <script type="text/javascript" src="../biz/jquery/jquery-1.7.1.js"></script>
    <link rel="stylesheet" type="text/css" href="../gui/layout.css" />
    <script type="text/javascript" src="../biz/ext3/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../biz/ext3/ext-all.js"></script>
	<script type="text/javascript" src="../biz/ext3/resources/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../biz/ext3/ux/form/DateTimeField.js"></script>
	<script type="text/javascript" src="../biz/ext3/ux/BizComboBox.js"></script>
	<script type="text/javascript" src="../biz/ext3/ux/MultiSorts.js"></script>
	<script type="text/javascript" src="../biz/base/xmlUtil.js"></script>
	<script type="text/javascript" src="../biz/ext3/ux/RestJson.js"></script>
	<script type="text/javascript" src="../biz/base/StoreHelper.js"></script>
	<script type="text/javascript" src="../biz/base/RenderUtil.js"></script>
	<script type="text/javascript" src="../biz/base/GridEditorUtil.js"></script>
	<script type="text/javascript" src="../biz/base/vtypes.js"></script>
	<script type="text/javascript" src="../biz/base/FormHelper.js"></script>
	<script type="text/javascript" src="../biz/base/CompositePanel.js"></script>
	<script type="text/javascript" src="../biz/base/FormEditorUtil.js"></script>
	<script type="text/javascript" src="../biz/ext3/examples/ux/MultiSelect.js"></script>
	<script type="text/javascript" src="../biz/ext3/examples/ux/ItemSelector.js"></script>
 </head>
<body  style="background-color:rgb(223, 232, 246);" th:attr="table=${table}">
<div id="form_container"></div>
<div id="grid_container"></div>
<div id="container3" ></div>
<div id="container4"></div>
<div id="container5"></div>
<div id="container6"></div>
<div id="container7"></div>
 <div id="performance_div">
 	<div id="performance_chart"></div>
 	<div id="performance_table"></div>
 </div>
 <script>

 var tbName=$("body").attr("table");
 function initTableGrid(region){
		var selModel=new Ext.grid.CheckboxSelectionModel({singleSelect : false});
		var column= new Ext.grid.ColumnModel({
	        columns: [
					{ header: '序号', dataIndex: 'ORDINAL_POSITION', sortable: true },
					{ header: '列名', dataIndex: 'COLUMN_NAME'},
					{ header: '类型', dataIndex: 'COLUMN_TYPE',hidden:true},
					{header:"类型",dataIndex:'DATA_TYPE',editor:{
						xtype:'combo',
						name:"type",
						valueField:'name',
						displayField:'name',
						mode:'local',
						allowBlank:false,
						triggerAction:'all',
						forceSelection:true,
						store:new Ext.data.JsonStore({
							fields:['name','code'],
						    data:[{name:"varchar",code:"1"},
						    	{name:"char",code:"1"},
						    	{name:"text",code:"1"},
						    	{name:"float",code:"6"},
						    	{name:"double",code:"8"},
						    	{name:"numeric",code:"2"},
						    	{name:"date",code:"91"},
						    	{name:"time",code:"92"},
						    	{name:"datetime",code:"91"},
						    	{name:"timestamp",code:"97"},
						    	{name:"bigint",code:"-5"},
						    	{name:"integer",code:"4"},
						    	{name:"int",code:"4"},
						    	{name:"tinyint",code:"4"},
						    	{name:"smallint",code:"4"},
						    	{name:"mediumnint",code:"4"},
						    	{name:"blob",code:"2004"},
						    	{name:"tinyblob",code:"2004"},
						    	{name:"mediumnblob",code:"2004"},
						    	{name:"longblob",code:"2004"}]
						
						})
					}},
					
					{ header: '备注', dataIndex: 'COLUMN_COMMENT', sortable: true}
	        ]
	    });
		  
		var store=new Ext.data.JsonStore({
			fields:['ORDINAL_POSITION','COLUMN_NAME','COLUMN_TYPE','DATA_TYPE','COLUMN_COMMENT'],
			autoLoad:true,
			proxy:new Ext.data.RestProxy({url:'./table/columns/'+tbName}),
			idProperty:"COLUMN_NAME",
			root:"itemList",
			totalProperty: 'total',
			baseParams:{"pageInfo.start":0,"pageInfo.limit":20},
			paramNames:{start:'pageInfo.start',limit:'pageInfo.limit',sort:'sortInfo.field',dir:'sortInfo.direct'},
			sortInfo:{
				field : "ORDINAL_POSITION",
				direction : "ASC"
			}
		});
		  var tbars = new Ext.Toolbar({items: [
			  
			  {text:"新建",iconCls:"icon-create",handler:showAddNew},
			  {text:"修改",iconCls:"icon-modify",handler:showModifyWin},
			  {text:"删除",iconCls:"icon-delete",handler:function(){
					var arr = Ext.getCmp('column_grid').selModel.getSelections();
					if(arr.length==0)return;
					var cols="";
					for(var i=0;i<arr.length;i++){
						
						if(i>0)
						cols+=",";
						cols+=arr[i].get("COLUMN_NAME");
					}
					var url="./column/delete?table="+tbName+"&columns="+cols;
					Ext.Ajax.request({
						url:url,
						
						success:function(){
							store.reload();
						},
						failure:function(){
							store.reload();
						}
					})
					
				}},
			  {text:"刷新",iconCls:"icon-finish",handler:function(){
				  store.reload();
			  }},
			  {text:"上移",iconCls:"upMove",handler:function(){
				
				moveColumn(-1,store);
				}},
			  {text:"下移",iconCls:"downMove",handler:function(){
				  moveColumn(1,store);
				}},
		                          	  ]});
		  var conf = {xtype:'paging',pageSize:20,displayInfo:true,autoWidth:true};
	      conf.autoWidth=true;
	      conf.displayMsg='<font color="red">{0}~{1}</font>条,总数: <font color="red">{2}</font> 条.';
	      conf.emptyMsg= "数据记录为空";
	      conf.store=store;
		  var grid= new Ext.grid.EditorGridPanel({
	          tbar:tbars,
	          id:'column_grid',
	          split:true,
	          width:420,
	          store: store,
	          region:region,
	          selModel:selModel,
	          colModel: column,
	          bbar:Ext.create(conf),
	          viewConfig:{forceFit:true},
	          listeners:{
	        	  'rowclick': function(grid, rowindex, e) {
	        			
	        		},
	        	'rowdblclick':function(grid, rowindex, e) {
	        		showModifyWin();
	        	}
	          }
	      });
		  return grid;
	}
	
	
	Ext.onReady(function(){
	    Ext.QuickTips.init();
	    var grid=initTableGrid('center');
	    new Ext.Viewport({
			height : document.documentElement.clientHeight - 10,
			renderTo : 'container7',
	        layout:'border',
	        items : [grid],
	    });
	 
	});
	function moveColumn(step,store){
		 var grid=Ext.getCmp('column_grid'),store=grid.store,
		 sm=grid.getSelectionModel(),sels=sm.getSelections();
	  	if(sels.length==0)return ;
		var sel=sels[0],index=store.indexOf(sel),
		length=store.getCount()-1,
		data={table:tbName};
		data["column"]=sel.get("COLUMN_NAME");
		data["step"]=step;
		var url="./column/move";
		Ext.Ajax.request({
			url:url,
			params:data,
			success:function(){
				store.reload();
			},
			failure:function(){
				store.reload();
			}
		});
	}
	function showAddNew(){
		var name='addNewWin';
		var xname="addNewForm";
		var win=Ext.getCmp(name);
		if(win) {
			var form=Ext.getCmp(xname).getForm();
			form.reset();
			return win.show();
		}
		var flds=[{
			fieldLabel:"列名",
			xtype:"textfield",
			allowBlank:true,
			name:"name"
		},{
			fieldLabel:"数据类型",
			xtype:'combo',
			name:"type",
			valueField:'name',
			displayField:'name',
			mode:'local',
			allowBlank:false,
			triggerAction:'all',
			forceSelection:true,
			store:new Ext.data.JsonStore({
				fields:['name','code'],
			    data:[{name:"varchar",code:"1"},
			    	{name:"char",code:"1"},
			    	{name:"text",code:"1"},
			    	{name:"float",code:"6"},
			    	{name:"double",code:"8"},
			    	{name:"numeric",code:"2"},
			    	{name:"decimal",code:"2"},
			    	{name:"date",code:"91"},
			    	{name:"time",code:"92"},
			    	{name:"datetime",code:"91"},
			    	{name:"timestamp",code:"97"},
			    	{name:"bigint",code:"-5"},
			    	{name:"integer",code:"4"},
			    	{name:"int",code:"4"},
			    	{name:"tinyint",code:"4"},
			    	{name:"smallint",code:"4"},
			    	{name:"mediumnint",code:"4"},
			    	{name:"blob",code:"2004"},
			    	{name:"tinyblob",code:"2004"},
			    	{name:"mediumnblob",code:"2004"},
			    	{name:"longblob",code:"2004"}]
			
			})
		},{
			fieldLabel:"长度",
			name:"length",
			xtype:"numberfield",
			positive:true
		},{
			fieldLabel:"精度",
			name:"decimals",
			xtype:"numberfield",
			positive:true
		},{
			fieldLabel:"是否为主键",
			xtype:"combo",
			name:"key",
			valueField:"name",
			displayField:"text",
			triggerAction:'all',
			mode:'local',
			store:new Ext.data.JsonStore({
				fields:['name','text'],
				data:[{
					name:"PRI",text:"是"
				},{
					name:"",text:"否"
				}]
			})
		},{
			fieldLabel:"是否必填",
			name:"notNull",
			xtype:"combo",
			valueField:"name",
			displayField:"text",
			mode:"local",
			triggerAction:'all',
			store:new Ext.data.JsonStore({
				fields:['name','text'],
				data:[{
					name:"YES",text:"是"
				},{
					name:"NO",text:"否"
				}]
			})
		},{
			fieldLabel:"默认值",
			name:"defaultValue",
			xtype:"textfield"
			
		},{
			fieldLabel:"备注",
			name:"comment",
			xtype:"textarea"
		}];
		
		 var form = new Ext.FormPanel({
		        frame: true,
		        labelAlign: 'right',
		        labelWidth: 85,
		        width:200,
		        id:xname,
		        defaults:{
		        	width:190
		        },
		        autoScroll:true,
		        closable:true,
		        waitMsgTarget: true,
		        items: flds,
		        buttons:[{
	             text:'确认',
	             handler:function(){
	             	var url="./column/add?table="+tbName;
	             	var conf={
	 	  	   	  		    clientValidation: true,
	 	  	   	  		    url: url,
	 	  	   	  		    waitMsg:"保存中，请稍后...",
	 	  	   	  		    success: function(form, action) {
	 	  	   		  		  	Ext.getCmp("column_grid").store.reload();
	 	  	   		  	var win=Ext.getCmp(name);
	 	             	win.hide();
	 	  	   	     		},
	 	  	   	  		    failure: function(form, action) {
	 	  	   	  		Ext.getCmp("column_grid").store.reload();
	 	  	   	  		var win=Ext.getCmp(name);
		   	  		    	win.hide();
	 	  	   	  		 		return Ext.Msg.alert("结果","新建失败");
	 	  	   	  		    	
	 	  	   	  		    }
	 	  	   	  		};
	 	  	    	form.getForm().submit(conf);
	             }
	         },{
	             text: '取消',
	             handler: function(){
	             	var win=Ext.getCmp(name);
	             	win.hide();
	             }
	         }]
		 });
		 
		 var win = new Ext.Window({
	         layout:'fit',
	         id:name,
	         scrollable:true,
	         modal:true,
	         title:'新建',
	         width:500,
	         height:280,
	         plain: true,
	         items: form
	         
	     });
		 return  win.show();
	};
	function showModifyWin(){
		var me=this,name='modifyWin',xname="modifyForm";
		var win=Ext.getCmp(name);
		if(win) {
			win.loadRecord();
			return win.show();
		}
		var flds=[{
			xtype:"textfield",
			allowBlank:true,
			name:"column",
			readOnly:true,
			hidden:true
		},{
			fieldLabel:"列名",
			xtype:"textfield",
			allowBlank:true,
			name:"name"
		},{
			fieldLabel:"数据类型",
			xtype:'combo',
			name:"type",
			hiddenName:"type",
			valueField:'name',
			displayField:'name',
			mode:'local',
			allowBlank:false,
			triggerAction:'all',
			forceSelection:true,
			store:new Ext.data.JsonStore({
				fields:['name','code'],
			    data:[{name:"varchar",code:"1"},
			    	{name:"char",code:"1"},
			    	{name:"text",code:"1"},
			    	{name:"float",code:"6"},
			    	{name:"double",code:"8"},
			    	{name:"numeric",code:"2"},
			    	{name:"date",code:"91"},
			    	{name:"time",code:"92"},
			    	{name:"datetime",code:"91"},
			    	{name:"timestamp",code:"97"},
			    	{name:"bigint",code:"-5"},
			    	{name:"integer",code:"4"},
			    	{name:"int",code:"4"},
			    	{name:"tinyint",code:"4"},
			    	{name:"smallint",code:"4"},
			    	{name:"mediumnint",code:"4"},
			    	{name:"blob",code:"2004"},
			    	{name:"tinyblob",code:"2004"},
			    	{name:"mediumnblob",code:"2004"},
			    	{name:"longblob",code:"2004"}]
			
			})
		},{
			fieldLabel:"长度",
			name:"length",
			xtype:"numberfield",
			positive:true
		},{
			fieldLabel:"精度",
			name:"decimals",
			xtype:"numberfield",
			positive:true
		},{
			fieldLabel:"是否为主键",
			xtype:"combo",
			name:"key",
			hiddenName:"key",
			valueField:"name",
			displayField:"text",
			triggerAction:'all',
			mode:'local',
			store:new Ext.data.JsonStore({
				fields:['name','text'],
				data:[{
					name:"PRI",text:"是"
				},{
					name:"",text:"否"
				}]
			})
		},{
			fieldLabel:"是否必填",
			name:"notNull",
			hiddenName:"notNull",
			xtype:"combo",
			valueField:"name",
			displayField:"text",
			mode:"local",
			triggerAction:'all',
			store:new Ext.data.JsonStore({
				fields:['name','text'],
				data:[{
					name:"YES",text:"是"
				},{
					name:"NO",text:"否"
				}]
			})
		},{
			fieldLabel:"默认值",
			name:"defaultValue",
			xtype:"textfield"
			
		},{
			fieldLabel:"备注",
			name:"comment",
			xtype:"textarea"
		}];
		
		 var form = new Ext.FormPanel({
		        frame: true,
		        labelAlign: 'right',
		        labelWidth: 85,
		        width:200,
		        id:xname,
		        defaults:{
		        	width:190
		        },
		        autoScroll:true,
		        closable:true,
		        waitMsgTarget: true,
		        items: flds,
		        buttons:[{
	             text:'确认',
	             handler:function(){
	             	var url=getContextBase()+"db/table/column/update?table="+tbName;
	             	var conf={
	 	  	   	  		    clientValidation: true,
	 	  	   	  		    url: url,
	 	  	   	  		    waitMsg:"保存中，请稍后...",
	 	  	   	  		    success: function(form, action) {
	 	  	   		  		  	Ext.getCmp('column_grid').store.reload();
	 	  	   		  	var win=Ext.getCmp(name);
	 	             	win.hide();
	 	  	   	     		},
	 	  	   	  		    failure: function(form, action) {
	 	  	   	  		Ext.getCmp('column_grid').store.reload();
	 	  	   	  		var win=Ext.getCmp(name);
		   	  		    	win.hide();
	 	  	   	  		 		return Ext.Msg.alert("结果","更新失败");
	 	  	   	  		    	
	 	  	   	  		    }
	 	  	   	  		};
	 	  	    	form.getForm().submit(conf);
	             }
	         },{
	             text: '取消',
	             handler: function(){
	             	var win=Ext.getCmp(name);
	             	win.hide();
	             }
	         }]
		 });
		 
		 var win = new Ext.Window({
	         layout:'fit',
	         id:name,
	         scrollable:true,
	         modal:true,
	         title:'编辑',
	         width:500,
	         height:280,
	         plain: true,
	         items: form
	         
	     });
		 var FM={"key":"COLUMN_KEY","column":"COLUMN_NAME","name":"COLUMN_NAME","length":"CHARACTER_MAXIMUM_LENGTH","decimals":"NUMERIC_SCALE","type":"DATA_TYPE","notNull":"IS_NULLABLE","defaultValue":"COLUMN_DEFAULT","comment":"COLUMN_COMMENT"};
		 win.loadRecord=function(){
			 var sels=Ext.getCmp('column_grid').selModel.getSelections();
			 if(sels.length==0)return;
			 var record=sels[0];
			 Ext.each(form.items.items,function(f,i){
				 f.setValue(record.json[FM[f["name"]]]);
			 });
		 };
		 win.loadRecord();
		 return  win.show();
	};
 </script>
</body>
</html>


